<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        {{ $t('logs.userLogs') }}
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            :pageMethod="(params) => {
              params.search = searchValue;
              if(authModule.authrole === 'system_admin') {
                params.cloud_tenant_id = -1;
              } else {
                params.cloud_tenant_id = authModule.cloud_tenant_id;
              }
              return $eagleApi.apiGetUserLogs(params);
            }"
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button class="icon-button setting-button" style="width: auto;" :loading = "tableSlotData.table.loading"
                @click="$nextTick(()=>tableSlotData.table.refresh().then(()=>{
                    $message.success($t('common.refreshSuccess'))
                  }).catch(()=>{
                    $message.success($t('common.refreshFail'))
                  }))">
                  <i v-if="!tableSlotData.table.loading" class="el-icon-refresh" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('common.refresh') }}</span>
                </el-button>
              </div>
              <div class="table-right-options">
                <el-input :placeholder="$t('logs.searchbyuser')" v-model="searchValue" @change="tableSlotData.table.refresh" style="width: 180px; margin-left:10px" >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-button @click="tableSearchChange(tableSlotData)" type="primary" style="margin-left: 10px;" >{{ $t('common.search') }}</el-button>
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column
                prop="time"
                :label="$t('logs.operationTime')"
              >
                <template #default="props">
                  <span>{{ parseTime(new Date(props.row.time / (1000 * 1000))) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="user_name"
                :label="$t('logs.user')"
              >
                <template #default="props">
                  <span>{{ props.row.user_name }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="result"
                :label="$t('logs.terminalName')"
                v-if="authModule.authrole !== 'system_admin'"
              >
                <template #default="props">
                  <span v-if="props.row.client_name">{{ props.row.client_name }}</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="action"
                :label="$t('logs.operation')"
              >
                <template #default="props">
                  <span>{{ $t("objectActive." + props.row.action) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="result"
                :label="$t('logs.operationResult')"
              >
                <template #default="props">
                  <span v-if="200 <= props.row.result < 300 ">Ok</span>
                  <span v-else>failure</span>
                </template>
              </el-table-column>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../components/Basic/Table/BasicTable.vue';
// import LinkButton from '../../components/Basic/Button/LinkButton.vue';
import { parseTime } from '../../utils';
// import KeyValue from '../../components/Basic/KeyValue/KeyValue.vue';
import { AuthModule } from '../../store/modules/auth'
export default Vue.extend({
  components: {
    BasicTable,
    // LinkButton,
    // KeyValue
  },
  computed: {
    parseTime: () => parseTime,
    authModule: () => AuthModule
  },
  data() {
    return {
      searchValue: "",
      loading: false,
    };
  },
  methods: {
    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
  },
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}

.delete-warning-icon {
  color: #FF931D;
  font-size: 20px;
  margin-right: 10px;

  &::before {
    font-size: 20px;
  }
}
</style>